<main id="dd_unit_rent_details_report">
  <hl-page-header title="租赁明细表" class="mb-20">
    <hl-button type="outline" @on-click="excl" v-if="quanxian.indexOf('c374')">导出</hl-button>
  </hl-page-header>
  <div class="search-container" style="borderBottom:none;">
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">项目</div>
      <div>
        <hl-select :data="projectList" v-model="projectIdSelect" :width="140" @on-change="getProjectItem"></hl-select>
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">日期</div>
      <div>
        <web-calendar v-model="reportDate" tips="账单日期" width="156"></web-calendar>
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">出租情况</div>
      <div>
        <hl-select :data="rentList" v-model="selectedRentStatus" :width="140" @on-change="getRentItem"></hl-select>
      </div>
    </div>
    <div class="hl-global-search-item mr-10">
      <div class="hl-global-search-title">合同期限</div>
      <div class="clearfix">
        <div style="float:left;">
          <input class="global_ipt_text" autocomplete="off" type="number" min="1" v-model="contractYearsStart" style="width:140px;"/>
          <!-- <web-calendar v-model="contractYearsStart" tips="开始日期" width="140"></web-calendar> -->
        </div>
        <span style="float:left;margin:0 6px;lineHeight:34px;">~</span>
        <div style="float:left;">
          <input class="global_ipt_text" autocomplete="off" type="number" min="1" v-model="contractYearsEnd" style="width:140px;"/>
          <!-- <web-calendar v-model="contractYearsEnd" tips="结束日期" width="140"></web-calendar> -->
        </div>
      </div>
    </div>

    <hl-button @on-click="search" size="mini">查询</hl-button>
    <hl-button @on-click="reset" size="mini">重置</hl-button>
  </div>

  <div class="rent-content br-4 global_table relative" style="padding:0;">
		<div class="hl-custom-tabl-dialog" v-if="loadingFlag" style="zIndex:99;"><img src="assets/images/loading.gif" alt=""><div>加载中...</div></div>
    <table>
      <thead>
        <tr class="global_table_title">
          <th>序</th>
          <th>项目名称</th>
          <th>
            <div style="width:200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
              出租资源
            </div>
          </th>
          <th>承租单位</th>
          <th>可出租面积(m²)</th>
          <th>已出租面积(m²)</th>
          <!-- <th>业态</th> -->
          <th>月租金(元)</th>
          <th>租金单价(元／平米／天)</th>
          <th>租期起止日期</th>
          <th>合同期限</th>
          <th>免租期</th>
          <th>租金付款方式</th>
          <th>首年首月租金</th>

          <!-- <th>递增率</th> -->
          <th>合同总价(元)</th>
          <th>应收保证金(元)</th>
          <th>已收保证金(元)</th>
          <th>未收保证金(元)</th>
          <th>保证金核算主体</th>
          <th>应收押金分类(元)</th>

          <th>欠费金额(元)</th>
          <th>抵减押金后欠费(元)</th>
          <th>超期月份</th>
          <th>应收租金(元)</th>
          <th>已收租金(元)</th>
        </tr>
        <tbody>
          <tr v-for="(item, index) in dataList" class="global_table_item">
            <td>{{ index+1 }}</td>
            <td>{{ item.projectName }}</td>
            <td style="position:relative;" class="rent-resource-containers">
              <div style="width:200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                {{ item.rentSource || '--' }}
              </div>
              <ul v-if="item.rentSource && item.rentSource.length > 17">
                <div class="companyContainer">
                  <div class="arrowicon3"><img src="assets/images/range_arrow.png" alt=""></div>
                  <div class="company_list">
                    <div class="companyItem" v-for="single in item.rentResourceList">{{ single }}</div>
                  </div>
                </div>
              </ul>
            </td>
            <td>{{ item.zlfName }}</td>
            <td>
              <span v-if="item.estateName">{{ item.unitAcreage | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.unitAcreage }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.rentUnitAcreage | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.rentUnitAcreage }}</span>
            </td>
            <!-- <td>{{ item.estateName }}</td> -->
            <td>
              <span v-if="item.estateName">{{ item.rentPriceMonth | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.rentPriceMonth }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.rentPriceDay | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.rentPriceDay }}</span>
            </td>
            <td>
              <span v-if="item.contractBeginDate">{{ item.contractBeginDate  }} ~ {{ item.contractEndDate  }}</span>
              <span v-if="!item.contractBeginDate"></span>
            </td>
            <td>{{ item.contractYears }}</td>
            <td>{{ item.freeMonths  }}</td>
            <td>
              {{ item.paymentPeriod }}<span v-if="item.paymentPeriod ">月预付</span></td>
            <td>
              <span v-if="item.estateName">{{ item.firstRentPriceMonth | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.firstRentPriceMonth }}</span>
            </td>

            <!-- <td>
              <span>{{ item.rentIncreaseMemo }}</span>
            </td> -->
            <td>
              <span v-if="item.estateName">{{ item.contractTotalAmount | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.contractTotalAmount }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.deposit | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.deposit }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.depositPayed | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.depositPayed }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.depositUnpaid | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.depositUnpaid }}</span>
            </td>
            <td>{{ item.projectCompanyName }}</td>
            <td>
              <span v-if="item.depositPeriod == 0 || item.depositPeriod">押{{ item.depositPeriod }}</span>
              <span v-if="!item.depositPeriod && item.depositPeriod != 0 ">{{ item.depositPeriod }}</span>
            </td>

            <td>
              <span v-if="item.estateName">{{ item.dueAmount | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.dueAmount }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.dueAmountDeposit | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.dueAmountDeposit }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.dueMonths | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.dueMonths }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.amountReceive | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.amountReceive }}</span>
            </td>
            <td>
              <span v-if="item.estateName">{{ item.amountPayed | formatNum }}</span>
              <span v-if="!item.estateName">{{ item.amountPayed }}</span>
            </td>
          </tr>
        </tbody>
    </table>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount || '0'}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="getData"></hl-select>
        条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
    </div>
  </div>

</main>

<script src="modules/report_bi/scripts/dd_unit_rent_details_report.js" charset="utf-8"></script>

<style>
  #dd_unit_rent_details_report {
    padding: 0 24px;
  }

  .search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-bottom: 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .screening-container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .screening-item {
    display: flex;
    align-items: center;
  }

  .rent-resource-containers ul {
    padding: 0 10px;
    position: absolute;
    top: 45px;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: none;
    z-index: 999999;
  }

  .rent-resource-containers:hover ul {
      display: block;
  }

  tr:nth-child(n+7) .rent-resource-containers ul {
    left: 50%;
    bottom: 100px;
    top: auto;
  }

  .companyContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -20px;
  }

  .companyContainer .companyItem {
    min-width: 140px;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing:border-box;
    line-height:34px;
  }

  .company_list {
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(153, 153, 153, .5);
    border-radius: 6px;
    position: absolute;
    top: -2px;
  }
</style>
